<script setup>
import {
  CircleClose,
  CircleCheck,
  ArrowRight,
  ArrowDown,
  Plus,
  Delete,
  Connection,
  AlarmClock,
  Edit
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { getTask, addNewTask, updateTask, delTask, addNewTaskModel } from '../api/api'
import { dateFormat, timeFormat, shortcuts } from '@/assets/tools'

const tableData = ref([])
const listData = ref([])
const userId = localStorage.getItem('userId')
const today = dateFormat()
const collapse = ref(false)
const content = ref('')
const contextMenuVisible = ref(false)
const contextMenuPosition = ref({ x: 0, y: 0 })
let clickedTask = null
const deadlineDate = ref('')

const getBkg = (deadline) => {
  if (deadline < today) {
    return '#ffbcbc'
  } else if (deadline == today) {
    return '#ffe4b3'
  }
  return '#a2dfa2'
}

const addNew = async (content) => {
  const params = {
    userId,
    content,
    createTime: timeFormat(),
    deadline: dateFormat(),
    type: 2
  }
  const res = await addNewTask(params)
  if (res.status) return ElMessage.warning('保存待办任务失败！')
  ElMessage.success('保存成功！')
  getTaskList()
}

const showContextMenu = (event, row) => {
  event.preventDefault()
  contextMenuVisible.value = true
  contextMenuPosition.value = {
    x: event.clientX,
    y: event.clientY
  }
  clickedTask = row
}

const closeRightMenu = () => {
  contextMenuVisible.value = false
  clickedTask = null
}

const handleMenuItemClick = async (e, flag) => {
  e.stopPropagation()
  if (flag === 1 || flag === -1) {
    // 完成/放弃
    const params = {
      taskId: clickedTask.id,
      paramName: 'status',
      paramValue: flag,
      finishedTime: today
    }
    const res = await updateTask({ params })
    if (res.status) return ElMessage.warning('处理待办任务失败！')
  } else if (flag == 3) {
    // 删除
    const res = await delTask({
      params: {
        id: clickedTask.id
      }
    })
    if (res.status) return ElMessage.warning('删除待办任务失败！')
  } else if (flag == 4) {
    // 设置到期时间
    const params = {
      taskId: clickedTask.id,
      paramName: 'deadline',
      paramValue: dateFormat(deadlineDate.value)
    }
    const res = await updateTask({ params })
    if (res.status) return ElMessage.warning('设置到期时间失败！')
  } else {
    // 新增到任务模板
    const res = await addNewTaskModel({ content: clickedTask.content })
    if (res.status) return ElMessage.warning('新增到任务模板失败！')
  }
  contextMenuVisible.value = false
  clickedTask = null
  getTaskList()
  ElMessage.success('操作成功')
}

const getTaskList = async () => {
  const res = await getTask({ params: { userId } })
  if (res.status) return ElMessage.warning('获取待办任务失败！')
  else {
    tableData.value = res.data.filter((i) => i.status == 0)
    listData.value = res.data.filter((i) => i.status != 0)
  }
}

onMounted(() => {
  getTaskList()
})
</script>
<template>
  <main style="padding: 20px; height: 100%" @click="closeRightMenu($event)">
    <div
      v-if="contextMenuVisible"
      :style="{ top: contextMenuPosition.y + 'px', left: contextMenuPosition.x + 'px' }"
      style="position: absolute; z-index: 9"
    >
      <ul>
        <li @click="handleMenuItemClick($event, 1)">
          <el-icon :size="30" color="green"><CircleCheck /> </el-icon> 完成
        </li>
        <li @click="handleMenuItemClick($event, -1)">
          <el-icon :size="30" color="orange"><CircleClose /></el-icon> 放弃
        </li>
        <li @click="handleMenuItemClick($event, 3)">
          <el-icon :size="30" color="red"><Delete /> </el-icon> 删除，慎重!!
        </li>
        <li>
          <el-icon :size="30" color="yellow"><AlarmClock /> </el-icon>
          <!-- 设置到期时间 -->
          <el-date-picker
            v-model="deadlineDate"
            type="date"
            style="width: 130px"
            placeholder="设置到期时间"
            :shortcuts="shortcuts"
          />
          <el-button type="primary" @click="handleMenuItemClick($event, 4)" :icon="Edit" />
        </li>
        <li @click="handleMenuItemClick($event, 5)">
          <el-icon :size="30" color="blue"><Connection /> </el-icon> 新增到任务模板
        </li>
      </ul>
    </div>
    <div>
      <div class="remark">
        <span style="background-color: #ffbcbc">已到期</span>
        <span style="background-color: #ffe4b3">今日到期</span>
        <span style="background-color: #a2dfa2">明日以后到期</span>
      </div>
      <div
        v-for="row in tableData"
        class="list-row"
        :style="{ background: getBkg(row.deadline) }"
        @contextmenu.prevent="showContextMenu($event, row)"
      >
        {{ row.content }}
      </div>
      <el-input v-model="content" style="margin-top: 10px; height: 40px" placeholder="快速新增任务">
        <template #append>
          <el-button :icon="Plus" @click="addNew(content)" />
        </template>
      </el-input>
    </div>

    <div style="padding: 20px 0">
      <el-button type="default" @click="collapse = !collapse">
        <el-icon v-if="collapse">
          <ArrowDown />
        </el-icon>
        <el-icon v-else> <ArrowRight /> </el-icon>&nbsp; 已完成 / 已放弃 {{ listData.length }}
      </el-button>
      <div
        v-show="collapse"
        class="list-row list-row-finished"
        v-for="(row, index) in listData"
        :key="index"
        :title="`创建时间：${row.createTime} 结束时间：${row.finishedTime}`"
      >
        <el-icon v-if="row.status == -1" color="red">
          <CircleClose />
        </el-icon>
        <el-icon v-if="row.status == 1" color="green">
          <CircleCheck />
        </el-icon>
        {{ row.content }}
      </div>
    </div>
  </main>
</template>
<style lang="less" scoped>
ul {
  border-top: 1px solid #c59cfd;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #dfc7ff;
  border-radius: 5px;
  font-size: 16px;
  color: black;
  font-weight: bold;

  li {
    padding: 3px 10px;
    border: 1px solid #c59cfd;
    border-top: 0;
    line-height: 32px;
    padding-bottom: 10px;

    i {
      position: relative;
      top: 9px;
    }

    &:hover {
      background-color: #cba7fa;
    }
  }
}
.remark {
  text-align: center;
  margin-bottom: 15px;
  span {
    margin: 0 5px;
    padding: 5px 10px;
    text-align: center;
    border-radius: 5px;
  }
}
.list-row {
  border-bottom: 0;
  padding: 8px 15px;
  margin-top: 10px;
  border-radius: 3px;
}
.list-row-finished {
  text-decoration: line-through;
  background: #ede0ff;
}
.el-input {
  --el-input-border-color: #8dc78d;
  --el-input-bg-color: transparent;
  --el-input-hover-border-color: #b8e7b8;
  --el-input-focus-border-color: #8dc78d;
  ::placeholder {
    color: #a1cda1;
  }

  /deep/ .el-input-group__append {
    background-color: #b8e7b8;
    color: #5c885c;
    font-weight: bold;
  }
}
</style>
